<template>
  <div class="chart_main">
    <div v-show="state.option.show" ref="lineChart"></div>
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref, defineProps, reactive, computed, watch} from "vue";
import * as echarts from "echarts";
import {copyDefinedProperties} from "../../../../utils/copy.ts"
import {getColorFromLocal} from "../../../style/css.ts";
defineOptions({
  name: 'Line'
})
let cmap=getColorFromLocal()
const props = defineProps(['option']);
const lineChart=ref(null)
const state = reactive({
  option:{
    height:200,
    width:300,
    left:0,
    top:0,
    show:true,
    legenddata:['m1'],
    datalist:{
      m1:{color:'#d51e64',data:[]},
    }
  },
  window:{
    height:1700,
    width:800,
  }
});
watch(()=>props.option,(newValue,oldValue)=>{
  // console.log('workOrder变化了',newValue,oldValue)
  setting()
},{immediate:true,deep:true})
onMounted(()=>{
  setting()
  initBarChart()
})
function setting(){
  if(props.option!==undefined){
    copyDefinedProperties(props.option,state.option)
    state.window={
      width: document.body.clientWidth,
      height: document.body.clientHeight
    }
  }
}
let elinechart
let canvas
const left=computed(()=>`${(state.option.left/100)*state.window.width}px`)
const top=computed(()=>`${(state.option.top/100)*state.window.height}px`)
window.addEventListener('resize',()=>{
  // console.log("width,height",document.body.clientWidth,document.body.clientHeight)
  state.window={
    width: document.body.clientWidth,
    height: document.body.clientHeight
  }
  elinechart.resize(getChartSize())
})
function getChartSize(){
  return{
    width:(state.option.width/100)*state.window.width,
    height:(state.option.height/100)*state.window.height
  }
}
// let dataoption1 = [];
let oneMin = 60*1000
let now = new Date()
now.setMinutes(now.getMinutes()-100)
let value = Math.random() * 1000;
function minRandomData(){
  now = new Date(+now + oneMin);
  value = value + Math.random() * 21 - 10;
  return {
    name: now.toString(),
    value: [
      now.getFullYear() + '/' + (now.getMonth() + 1) + '/' + now.getDate() + ' ' + (now.getHours() >= 10 ? now.getHours() : '0' + now.getHours()) + ':' + (now.getMinutes() >= 10 ? now.getMinutes() : '0' + now.getMinutes()),
      0
    ]
  };
}
function initBarChart(){
  var series= []
  var tmp=0
  Object.values(state.option.datalist).forEach(dataseries=>{
    now = new Date()
    now.setMinutes(now.getMinutes()-100)
    for (var i = 0; i < 100; i++) {
      dataseries.data.push(minRandomData());
    }
    // console.log(dataseries.className)
    series.push({
      name: state.option.legenddata[tmp],
      type: 'line',
      showSymbol: false,
      data: dataseries.data,
      lineStyle: {
        normal: {
          color: cmap.color[tmp],
          width: 1,
          type: 'solid',
          shadowColor: 'rgba(0,208,255,0.86)',
          shadowBlur: 5,
          shadowOffsetY: 1
        }
      }
    })
    tmp++
  })


  var option = {
    legend: {
      show: true, // 显示图例
      orient: 'horizontal', // 图例排列方式
      x: 'center', // 图例的水平位置
      y: 'top', // 图例的垂直位置
      padding: 25, // 图例内边距
      itemGap: 10, // 图例每项之间的间隔
      data: state.option.legenddata,// 图例数据
      textStyle: {
        color: cmap.textColor,       // 字体颜色
        fontStyle: 'normal', // 字体风格，如 'normal'、'italic'、'oblique'
        fontWeight: 'bold',  // 字体粗细，如 'normal'、'bold'、'bolder'、'lighter' 或者数字值
        fontFamily: 'Arial', // 字体类型
        fontSize: 12         // 字体大小
      }
    },
    title: {
      // text: 'Dynamic Data & Time Axis'
    },
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        params = params[0];
        var date = new Date(params.name);
        return (
            date.getHours()
        );
      },
      axisPointer: {
        animation: false
      }
    },
    xAxis: {
      type: 'time',
      splitLine: {
        show: false
      },
      axisLabel: {
        width: 20, //将内容的宽度固定
        interval:100,
        // overflow: 'truncate', //超出的部分截断
        // ellipsis: '...',//截断的部分用...代替

      }

    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '100%'],
      max:function (value){
        return value.max/0.8
      },
      splitLine: {
        show: false
      }
    },
    series: series
  };
  elinechart=echarts.init(lineChart.value,null,getChartSize())
  //修改样式(防止被挡)
  canvas=elinechart.getZr().dom
  canvas.style.zIndex=9999
  // canvas.style.position="absolute"
  // canvas.style.top=`${state.option.top}px`
  // canvas.style.left=`${state.option.left}px`
  elinechart.setOption(option)
}
function SetOption(data){
  if(elinechart!==undefined){
    now = new Date(+now + oneMin);
    value = value + Math.random() * 21 - 10;
    var series=[]
    var i =0
    // console.log(data)
    Object.values(state.option.datalist).forEach(dataseries=>{
      let d={
        name: now.toString(),
        value: [
          now.getFullYear() + '/' + (now.getMonth() + 1) + '/' + now.getDate() + ' ' + (now.getHours() >= 10 ? now.getHours() : '0' + now.getHours()) + ':' + (now.getMinutes() >= 10 ? now.getMinutes() : '0' + now.getMinutes()),
          data[i]
        ]
      }
      dataseries.data.shift();
      dataseries.data.push(d);
      series.push(dataseries)
      i++
    })
    elinechart.setOption({
      series: series
    });
  }
}
defineExpose({SetOption})
</script>

<style scoped>
.chart_main{
  position: absolute;
  left:v-bind(left);
  top:v-bind(top);
}
</style>
